<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jhq05</title>
    <link rel="stylesheet" href="jhq05.css" />
  </head>
  <body>
    <div id="heart">
      <div id="checkSonNumber">
        <form name="checkSonNumber">
          <p>请输入一个字符串</p>
          <input type="text" name="father" class="stringsCount" />
          <p>请输入一个字串</p>
          <input type="text" name="son" class="stringsCount" />
          <input type="button" name="submit" value="提交" class="submit" />
          <p>子串出现的次数为：<span id="sonNumber"></span></p>
        </form>
      </div>
      <div id="signInByEmail">
        <form name="signInByEmail">
          <p>邮箱登录</p>
          <label for="email">邮箱：</label>
          <input
            type="text"
            id="email"
            name="inputEmail"
            class="stringsSignIn"
          />
          <br />
          <label for="password">密码：</label>
          <input
            type="password"
            id="password"
            name="inputPassword"
            class="stringsSignIn"
          />
          <input type="button" name="submit" value="提交" class="submit" />
        </form>
      </div>
      <div id="successSignIn">
        <p>登录成功</p>
        <div id="logo"></div>
        <p>姓名：接汉卿</p>
        <p>年龄：18</p>
        <p>特长：C语言</p>
      </div>
      <div id="feet"></div>
    </div>

    <script type="text/javascript">
      (function () {
        let myForm = document.forms["checkSonNumber"];
        let fatherString = "";
        let sonString = "";
        myForm.elements["father"].addEventListener(
          "input",
          () => (fatherString = myForm.elements["father"].value)
        );
        myForm.elements["son"].addEventListener(
          "input",
          () => (sonString = myForm.elements["son"].value)
        );
        let count = () => {
          let number = 0;
          for (let i = 0; i < fatherString.length; i++) {
            for (let j = 0; j < sonString.length; j++) {
              if (fatherString[i] === sonString[j]) i++;
              else if (j === 0) break;
              else {
                i--;
                break;
              }
              if (j + 1 === sonString.length) {
                number++;
                i--;
              }
            }
            console.log("index", i);
          }
          console.log(number);
          document.getElementById("sonNumber").innerText = number;
        };
        myForm.elements["submit"].onclick = count;
        let strings = document.getElementsByClassName("stringsCount");
        function updateHeight(input) {
          if (input.value === "") input.style.height = "0";
          else input.style.height = "2vw";
        }
        for (let string of strings) {
          updateHeight(string);
          string.addEventListener(
            "mouseover",
            () => (string.style.height = "2vw")
          );
          string.addEventListener("mouseleave", () => {
            if (!string.matches(":focus") && string.value === "")
              string.style.height = "0";
          });
          string.addEventListener("blur", () => updateHeight(string));
        }
      })();
      (function () {
        let userInput = document.forms["signInByEmail"];
        let emailString = "";
        let passwordString = "";
        let checkRegularExpression = /^[^\.]*@[^\.]*\.com$|^[^\.]*@[^\.]*\.cn$/;
        document
          .getElementById("email")
          .addEventListener("change", function () {
            emailString = this.value;
            console.log(emailString);
            if (!checkRegularExpression.test(emailString)) {
              document.getElementById("heart").style.backgroundColor = "red";
              setTimeout(() => alert("请输入正确的邮箱！"), 10);
            } else document.getElementById("heart").style.backgroundColor = "lightgreen";
          });
        document
          .getElementById("password")
          .addEventListener("change", function () {
            passwordString = this.value;
            console.log(passwordString);
          });
        let signIn = () => {
          let msg = [
            {
              name: "张三",
              age: 20,
              strengths: "JavaScript",
              avatar:
                "https://tse4-mm.cn.bing.net/th/id/OIP-C.39mOMBjUfsK-HL9jUbv1MwHaE7?pid=ImgDet&rs=1",
              email: "yunding@qq.com",
              password: 33333,
            },
            {
              name: "李四",
              age: 19,
              strengths: "python",
              avatar:
                "https://tse2-mm.cn.bing.net/th/id/OIP-C.YlKimVo94OkaZDZCzPIDpAHaFh?pid=ImgDet&rs=1",
              email: "12345678@163.com",
              password: 11111,
            },
            {
              name: "王五",
              age: 18,
              strengths: "Java",
              avatar:
                "https://tse2-mm.cn.bing.net/th/id/OIP-C.P2hK9SRjhFE8WM9N8tgWFAHaEQ?pid=ImgDet&rs=1",
              email: "yundingshuyuan@qq.cn",
              password: 222222,
            },
          ];
          return (ie = "", ip = "") => {
            ie = emailString;
            ip = +passwordString;
            let p = document.getElementById("logo");
            for (let i in msg) {
              //console.log(i, msg.length, typeof i, typeof msg.length);
              if (ie === msg[i].email && ip === msg[i].password) {
                //alert("成了");
                document.getElementById("successSignIn").innerHTML = `
                  <p>登录成功</p>
                  <div id="logo"></div>
                  <p>姓名：${msg[i].name}</p>
                  <p>年龄：${msg[i].age}</p>
                  <p>特长：${msg[i].strengths}</p>
                `;
                document.getElementById("successSignIn").style.display =
                  "block";
                document.getElementById("signInByEmail").style.display = "none";
                p = document.getElementById("logo");
                if (msg[i].strengths === "python")
                  p.style.backgroundImage =
                    "url('https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/python-logo.png')";
                else if (msg[i].strengths === "JavaScript")
                  p.style.backgroundImage =
                    "url('https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/javascript-logo.png')";
                else if (msg[i].strengths === "Java")
                  p.style.backgroundImage =
                    "url('https://holyflame.oss-cn-hongkong.aliyuncs.com/jjj/java-logo.png')";
                else alert("!!!是不曾有过的语言大师！");
                //alert("???");
                break;
              } else if (ie === msg[i].email) {
                alert("密码输入错误。");
                break;
              }
              if (+i === 2) alert("用户不存在！");
            }
          };
        };
        userInput.elements["submit"].onclick = signIn();
      })();
    </script>
  </body>
</html>
